<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>滚动居中</title>
	<script src="./js/1.9.1-jquery.min.js"></script>
	<script src="./js/flexible.min.js"></script>	
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.nav_lists {
			display: flex;		
			padding: .1rem .2rem;	
			overflow-x: auto;			
		}
		.nav_lists::-webkit-scrollbar {
			width: 1rem;
			height: 2px;
		}
		.nav_lists::-webkit-scrollbar-thumb {
			background: pink;
		}
		.nav_list {			
			white-space: nowrap;
			padding: .15rem .3rem;
			border-radius: .1rem;			
		}
		.sel {
			background: blue;
			color: #fff;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="nav_lists">
			<div class="nav_list sel">乒乓球</div>
			<div class="nav_list">篮球</div>
			<div class="nav_list">足球</div>
			<div class="nav_list">足球2</div>
			<div class="nav_list">足球3</div>
			<div class="nav_list">足球4</div>
			<div class="nav_list">足球5</div>
			<div class="nav_list">足球6</div>
			<div class="nav_list">足球7</div>
			<div class="nav_list">足球8</div>
			<div class="nav_list">足球9</div>
		</div>
	</div>

	<script src="./js/bscroll.min.js"></script>
	<script>		
	    var index = 0;
		$('.nav_lists').delegate('.nav_list', 'click', function(){
			index = $(this).index();
			$(this).addClass('sel').siblings().removeClass('sel');
			//滚动居中
			var item = $(".sel");
			var container = $(".nav_lists");
			var itemOffset = item.offset();
			var itemOffsetLeft = itemOffset.left + container.scrollLeft();
			var centerLeft = ( container.width() - item.width()) / 2;
			container.animate({
				scrollLeft: itemOffsetLeft - centerLeft
			}, 600);			
		});			
		
	</script>
</body>

</html>